<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script src="https://cdn.staticfile.org/props-types.js"></script>
</head>

<body>

    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
    <script type="text/babel">
        class Person extends React.Component {
            // 对标签属性逃行类型、必要性的限制
            static propTypes = {
                name: PropTypes.string.isRequired,//Mll|name14.HH
                sex: PropTypes.string, // 限制sex为字符串
                age: PropTypes.number,//Willage/J#1
                speak: PropTypes.func,//限制speak为函数
            }
            // 指定默认标签属性值
            static defaultProps = {
                sex: '男', //sex默认值为男
                age: 18
            }
            render() {
                console.log(this);
                const { name, sex, age } = this.props
                return (
                    <ul>
                        <li>姓名： {name}</li>
                        <li>性别： {sex}</li>
                        <li>年龄： {age}</li>
                    </ul>
                )
            }
        }




        ReactDOM.render(<Person name="tom" age="18" sex="女" />, document.getElementById('example1'));
        const p = { name: '老王', sex: '男', age: '89' }
        // console.log('a', ...p) 报错 仅仅适用于标签属性的传递
        ReactDOM.render(<Person {...p} />, document.getElementById('example2'));
    </script>

</body>

</html>